<template>
  <view class="add-address-page">
    <view class="header">
      <view class="back-arrow" @click="back"></view>
      <view class="title">新增收货地址</view>
      <view></view> <!-- Placeholder for alignment -->
    </view>
    <view class="form-container">
      <view class="form-item">
        <text class="label">收货人姓名</text>
        <input class="input" type="text" v-model="formData.contacts" placeholder="请输入收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" type="text" v-model="formData.phone" placeholder="请输入手机号码" />
      </view>
      <view class="form-item">
        <text class="label">省份</text>
        <input class="input" type="text" v-model="formData.province" placeholder="请输入省份" />
      </view>
      <view class="form-item">
        <text class="label">城市</text>
        <input class="input" type="text" v-model="formData.city" placeholder="请输入城市" />
      </view>
       <view class="form-item">
        <text class="label">区域</text>
        <input class="input" type="text" v-model="formData.area" placeholder="请输入区域" />
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea class="textarea" v-model="formData.detailsAddr" placeholder="请输入详细地址，例：街道、门牌号等"></textarea>
      </view>
       <view class="form-item">
        <text class="label">地址类型</text>
        <view class="address-type">
          <view class="radio-item" @click="formData.defaults = 1">
            <text :class="['radio-icon', { checked: formData.defaults === 1 }]"></text>
            <text class="radio-label">家</text>
          </view>
          <view class="radio-item" @click="formData.defaults = 2">
            <text :class="['radio-icon', { checked: formData.defaults === 2 }]"></text>
            <text class="radio-label">公司</text>
          </view>
          <view class="radio-item" @click="formData.defaults === 3">
            <text :class="['radio-icon', { checked: formData.defaults === 3 }]"></text>
            <text class="radio-label">学校</text>
          </view>
           <view class="radio-item" @click="formData.defaults === 0">
            <text :class="['radio-icon', { checked: formData.defaults === 0 }]"></text>
            <text class="radio-label">其他</text>
          </view>
        </view>
      </view>
    </view>

    <view class="save-button-bar">
      <button class="save-button" @click="saveAddress">保存地址</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';
import backtop from 'uview-ui/libs/config/props/backtop';

const formData = ref({
  province: '',
  city: '',
  area: '',
  detailsAddr: '',
  contacts: '',
  phone: '',
  defaults: 0, // Default to '其他'
});

const saveAddress = async () => {
  // Basic validation (optional, can add more)
  if (!formData.value.contacts || !formData.value.phone || !formData.value.detailsAddr) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    });
    return;
  }

  try {
    const response = await unirequest({
      url: baseUrl + '/gas/address', // Assuming POST to /gas/address for adding
      method: 'POST',
      data: formData.value
    });

    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      uni.showToast({
        title: '地址保存成功',
        icon: 'success',
      });
      // Navigate back to the address list page after successful save
      uni.navigateBack();
    } else {
      const errorMessage = response.data && response.data.msg ? response.data.msg : '地址保存失败';
      uni.showToast({
        title: errorMessage,
        icon: 'none',
      });
      console.error('地址保存失败:', response);
    }
  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({
      title: '网络请求失败',
      icon: 'none',
    });
  }
};
const back = () => {
  uni.navigateBack(); // Navigate back to the previous page
};
// Function to handle back arrow click (optional)
// const goBack = () => {
//   uni.navigateBack();
// };

// Optionally bind the back arrow click in template:
// <view class="back-arrow" @click="goBack"></view>

</script>

<style scoped>
.add-address-page {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding-top: 50px; /* Padding for fixed header */
  padding-bottom: 80px; /* Padding for fixed button bar */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #4285f4;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-arrow {
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.form-container {
  padding: 15px;
  background-color: #fff;
  margin: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.form-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.form-item:last-child {
    border-bottom: none;
}

.label {
  width: 90px; /* Fixed label width */
  flex-shrink: 0;
  font-size: 15px;
  color: #333;
  margin-right: 15px;
}

.input {
  flex-grow: 1;
  font-size: 15px;
  color: #333;
  height: 30px; /* Fixed height for input */
}

.textarea {
  flex-grow: 1;
  font-size: 15px;
  color: #333;
  min-height: 60px; /* Minimum height for textarea */
  padding: 5px 0; /* Add some padding */
  width: auto; /* Allow textarea to grow */
  box-sizing: border-box; /* Include padding in element's total width and height */
}

.address-type {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping if many options */
  flex-grow: 1;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Space between radio options */
  cursor: pointer;
}

.radio-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio-icon.checked {
  background-color: #4285f4;
  border-color: #4285f4;
}

.radio-icon.checked::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
}

.radio-label {
  font-size: 15px;
  color: #333;
}

.save-button-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px; /* Padding around the button */
  background-color: #fff; /* White background bar */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.save-button {
  width: 100%;
  background-color: #4285f4;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  line-height: 1.5; /* Center text vertically */
}

.save-button:active {
   background-color: #3367d6;
}
</style> 